<template>
  <view>
    <u-popup
      :show="visible"
      mode="bottom"
      @close="close"
      @touchmove.stop.prevent
      :round="8"
    >
      <view class="pop flex-col">
        <view class="top flex">
          <view class="flex1 text-center">选择分类</view>
          <view class="add text-28" @click="showAdd = true">添加分类</view>
        </view>
        <scroll-view scroll-y class="list flex1">
          <view
            class="class flex flex-btw"
            v-for="(item, index) in classifyList"
            :key="index"
            @click="chooseClass(item)"
          >
            <view :class="[item.id == activeId ? 'active' : '']">{{
              item.title
            }}</view>
          </view>
        </scroll-view>
      </view>
      <addClass :visible.sync="showAdd" />
    </u-popup>
  </view>
</template>
<script>
import addClass from "@/components/pageComponents/sp-product/add-class";
import { mapState } from "vuex";
export default {
  components: {
    addClass,
  },
  data() {
    return {
      showAdd: false,
      activeId: "",
      list: [],
    };
  },
  props: {
    visible: {
      default: false,
    },
    categoryId: {
      default: "",
    },
  },
  computed: {
    ...mapState("sp-product/index", ["classifyList"]),
  },
  watch: {
    categoryId(value) {
      this.activeId = value;
    },
  },
  methods: {
    chooseClass(row) {
      this.activeId = row.id;
      this.$emit("chooseClass", { categoryId: row.id });
      this.close();
    },
    close() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang='scss' scoped>
.pop {
  height: 66vh;
  .top {
    padding: 30rpx 40rpx 35rpx;
    border-radius: 8px 8px 0px 0px;
    border-bottom: 1px solid #c7c7c7;
    font-size: 30rpx;
    font-weight: bold;
    position: relative;
    .add {
      position: absolute;
      right: 40rpx;
      color: var(--theme);
    }
  }
  .list {
    padding: 0rpx 40rpx;
    width: calc(100% - 80rpx);
    .class {
      font-size: 30rpx;
      color: #131313;
      font-weight: 500;
      height: 50rpx;
      margin-bottom: 15rpx;
      margin-top:30rpx;
      .active {
        color: var(--theme) !important;
      }
    }
  }
}

</style>